<template>

    <div class="container">
    <div>

    </div>
        <!-- 后台登录界面 -->
        <div class="login-form">
            <!-- 左侧登录logo -->
            <div class="login-left"></div>
            <!-- /左侧登录logo -->
            <!-- 右侧登录栏 -->
            <div class="login-right">
                <div class="login-input">
                    <div class="login-text"><span>皓 吱 窝 酒 店 后 台 登 录 界 面</span></div>
                    <el-form :model="User" status-icon :rules="rules" ref="ruleForm">
                        <el-form-item label="账号：" prop="username" label-width="120px">
                            <el-input style="width: 240px" v-model="User.username" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="密码：" prop="password" label-width="120px">
                            <el-input style="width: 240px" type="password" v-model="User.password" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>

                    <el-form style="margin-top: 20px;">
                        <el-button style="width: 280px;;margin-left: 80px" type="primary" @click="submitForm('ruleForm')">登录</el-button>
                    </el-form>
                </div>
            </div>
            <!-- /右侧登录栏 -->
        </div>
        <!-- /后台登录界面 -->
    </div>
</template>

<script>
    import Nav from '../../components/Nav'
    import Footer from '../../components/Footer'
    export default {
        name: 'Login',
        components:{
          Nav,
          Footer
        },
        data() {
            return {
                User: {
                    username: '', // 用户账号
                    password: '', // 用户密码
                },
                rules: {
                    username: [
                        {required: true, message: '请输入账号名称', trigger: 'blur'},
                        {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                    ]
                },
            }
        },
        methods: {
            /*登录*/
            submitForm(formName) {
                this.$refs[formName].validate(async (valid) => {
                    if (valid) {
                        if (!this.User.username) {alert('请输入账号');return false}
                        if (!this.User.password) {alert('请输入密码');return false}
                        let _this = this
                        this.$axios.post("http://localhost:8088/user/admin", this.User).then(function (res) {
                            //清空本次保存数据
                            if (res.data != -1) {
                                localStorage.setItem("admin", _this.User.username)
                                alert("登录成功！")
                                _this.User = {};
                                _this.$router.push({name:'Admin'});
                            } else {
                                alert("用户错误！");
                                _this.User = {};
                            }
                        }).catch(function (err) {
                            localStorage.removeItem('admin')
                            alert("登陆失败！");
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
        },
    };
</script>

<style scoped>
    .container {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        margin: auto;
        height: 100%;
    }

    .login-form {
        display: flex;
        width: 820px;
        height: 450px;
        border-radius: 10px;
        box-shadow: 0.14rem 0.17rem 2.35rem 0 rgba(40, 120, 255, 1.14);
        border-radius: 10px;
    }

    .login-left {
        width: 410px;
        height: 450px;
        background-image: url(../../assets/left_bg3.png);
        background-size: 100% 100%;
    }

    .login-right {
        width: 410px;
        height: 450px;
    }

    /*.login-input {*/
    /*	text-align: center;*/
    /*	height: 100%;*/
    /*}*/
    .login-text {
        margin-top: 40px;
        margin-bottom: 80px;
        color: #027fff;
        text-align: center;
        font-size: 24px;
    }
</style>
